"use client"

import { useEffect, useState } from 'react'
import useImageStore from '@/store/useImageStore'
import Image from 'next/image'

interface ImageType {
  pid: number;
  title: string;
  author: string;
  urls: {
    original: string;
  };
}

const ImageCard = ({ image }: { image: ImageType }) => {
  const [isLoading, setIsLoading] = useState(true)
  const [isError, setIsError] = useState(false)
  const [showModal, setShowModal] = useState(false)

  return (
    <div key={image.pid} className="border rounded-lg p-4">
      <div 
        className="relative w-full h-48 cursor-pointer"
        onClick={() => setShowModal(true)}
      >
        {isLoading && (
          <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
            加载中...
          </div>
        )}
        {isError ? (
          <div className="absolute inset-0 flex items-center justify-center bg-red-50">
            图片加载失败
          </div>
        ) : (
          <Image 
            src={image.urls.original} 
            alt={image.title}
            width={764}
            height={568}
            className="w-full h-full object-cover rounded"
            onLoadingComplete={() => setIsLoading(false)}
            onError={() => {
              setIsError(true)
              setIsLoading(false)
            }}
            unoptimized
          />
        )}
      </div>
      <div className="mt-2">
        <h3 className="font-bold">{image.title}</h3>
        <p className="text-sm text-gray-600">作者: {image.author}</p>
      </div>

      {showModal && (
        <div 
          className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
          onClick={() => setShowModal(false)}
        >
          <div className="relative max-w-4xl max-h-[90vh] bg-white rounded-lg p-2">
            <Image
              src={image.urls.original}
              alt={image.title}
              width={1200}
              height={800}
              className="w-auto h-auto max-h-[85vh] object-contain rounded"
              unoptimized
            />
            <button
              className="absolute top-2 right-2 bg-white rounded-full p-2 hover:bg-gray-100"
              onClick={(e) => {
                e.stopPropagation()
                setShowModal(false)
              }}
            >
              <span className="text-xl">×</span>
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

const ImageGallery = () => {
  const images = useImageStore.use.images()
  const loading = useImageStore.use.loading()
  const error = useImageStore.use.error()
  const fetchImages = useImageStore.use.fetchImages()

  useEffect(() => {
    fetchImages()
  }, [fetchImages])

  if (loading) {
    return (
      <div className="flex justify-center items-center min-h-[200px]">
        <div className="text-xl">加载中...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="flex justify-center items-center min-h-[200px]">
        <div className="text-red-500">错误: {error}</div>
      </div>
    )
  }

  return (
    <div className="flex flex-col items-center gap-4 p-4">
      <h2 className="text-2xl font-bold">图片库</h2>
      
      <button 
        onClick={fetchImages}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        刷新图片
      </button>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {images.map((image) => (
          <ImageCard key={image.pid} image={image} />
        ))}
      </div>
    </div>
  )
}

export default ImageGallery 